<template>
  <view class="container">
    <view class="booking-status-bar">
      <view 
        :class="{ active: status === 'all' }" 
        @click="status = 'all'"
        class="status-item"
      >
        全部
      </view>
      <view 
        :class="{ active: status === 'pending' }" 
        @click="status = 'pending'"
        class="status-item"
      >
        待使用
      </view>
      <view 
        :class="{ active: status === 'completed' }" 
        @click="status = 'completed'"
        class="status-item"
      >
        已完成
      </view>
    </view>

    <!-- 预约记录列表 -->
    <view class="booking-list">
      <view 
        class="booking-card" 
        v-for="(item, i) in filteredBookings" 
        :key="i"
      >
        <view class="booking-header">
          <text class="booking-number">预约编号：{{ item.id }}</text>
          <text class="booking-status" :class="item.statusClass">
            {{ item.statusText }}
          </text>
        </view>
        
        <view class="booking-body">
          <view class="booking-info">
            <text class="info-label">场地类型：</text>
            <text class="info-value">{{ item.courtType }}</text>
          </view>
          <view class="booking-info">
            <text class="info-label">预约时间：</text>
            <text class="info-value">{{ item.date }} {{ item.time }}</text>
          </view>
          <view class="booking-info">
            <text class="info-label">费用：</text>
            <text class="info-value">¥{{ item.price }}</text>
          </view>
        </view>
        
        <view class="booking-footer" v-if="item.status === 'pending'">
          <button 
            class="cancel-btn" 
            @click="cancelBooking(i)"
          >
            取消预约
          </button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty" v-if="filteredBookings.length === 0">
      <image src="/static/icon/empty.png" class="empty-img"></image>
      <text class="empty-text">暂无预约记录</text>
      <button class="empty-btn" @click="navToBooking">去预约</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 'all', // 筛选状态：all/pending/completed
      bookings: [
        {
          id: 'B2023102001',
          courtType: '国际标准赛台',
          date: '2023-10-20',
          time: '15:00-17:00',
          price: 160,
          status: 'pending', // 待使用
          statusText: '待使用',
          statusClass: 'status-pending'
        },
        {
          id: 'B2023101503',
          courtType: '专业训练球台',
          date: '2023-10-15',
          time: '19:00-20:30',
          price: 90,
          status: 'completed', // 已完成
          statusText: '已完成',
          statusClass: 'status-completed'
        },
        {
          id: 'B2023101005',
          courtType: '儿童专用球台',
          date: '2023-10-10',
          time: '10:00-11:00',
          price: 40,
          status: 'cancelled', // 已取消
          statusText: '已取消',
          statusClass: 'status-cancelled'
        }
      ]
    };
  },
  computed: {
    // 根据状态筛选预约
    filteredBookings() {
      if (this.status === 'all') return this.bookings;
      return this.bookings.filter(item => item.status === this.status);
    }
  },
  methods: {
    // 取消预约
    cancelBooking(index) {
      uni.showModal({
        title: '取消预约',
        content: '确定要取消本次预约吗？提前2小时取消可全额退款',
        confirmText: '确认取消',
        cancelText: '再想想',
        success: (res) => {
          if (res.confirm) {
            this.bookings[index].status = 'cancelled';
            this.bookings[index].statusText = '已取消';
            this.bookings[index].statusClass = 'status-cancelled';
            uni.showToast({ title: '预约已取消', icon: 'success' });
          }
        }
      });
    },
    // 跳转到预约页
    navToBooking() {
      uni.navigateTo({ url: '/pages/booking/booking' });
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}
.booking-status-bar {
  display: flex;
  background-color: #fff;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}
.status-item {
  flex: 1;
  text-align: center;
  padding: 15rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}
.status-item.active {
  color: #FF4D00;
}
.status-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background-color: #FF4D00;
  border-radius: 3rpx;
}
.booking-list {
  padding: 20rpx;
}
.booking-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.booking-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px dashed #eee;
}
.booking-number {
  font-size: 26rpx;
  color: #999;
}
.booking-status {
  font-size: 26rpx;
  font-weight: bold;
}
.status-pending {
  color: #FF4D00;
}
.status-completed {
  color: #00B42A;
}
.status-cancelled {
  color: #999;
}
.booking-body {
  margin-bottom: 20rpx;
}
.booking-info {
  display: flex;
  margin-bottom: 15rpx;
}
.info-label {
  font-size: 26rpx;
  color: #666;
  width: 160rpx;
}
.info-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}
.booking-footer {
  display: flex;
  justify-content: flex-end;
}
.cancel-btn {
  background-color: #fff;
  color: #FF4D00;
  border: 1px solid #FF4D00;
  padding: 10rpx 30rpx;
  border-radius: 60rpx;
  font-size: 24rpx;
  height: auto;
  line-height: normal;
}
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150rpx;
}
.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}
.empty-btn {
  background-color: #FF4D00;
  color: #fff;
  border: none;
  padding: 15rpx 40rpx;
  border-radius: 60rpx;
  font-size: 26rpx;
  height: auto;
  line-height: normal;
}
</style>